function strip_imgthumb_opr( imgurl ) {
    var idx = imgurl.indexOf( "@" );
    if ( idx > 0 ) {
        return imgurl.substring( 0, idx ); // 返回从start到end的位置，不包含end的那个字母
    }
    return imgurl;
}

( function() {
    var onlineImage,
        backupStyle = {};
    //    backupStyle = editor.queryCommandValue('background');
    var htmlObj = $( "<div>" + editor.getContent() + " </div>" );
    if ( htmlObj.find( ".article135" ).length > 0 ) {
        var style = htmlObj.find( ".article135:first" ).attr( "style" );
        if ( style ) {
            style = style.replace( "&amp;", "&" );
            var style_arr = style.split( ";" );
            for ( var i in style_arr ) {
                var style_item = style_arr[ i ].split( ":" );
                if ( style_item.length >= 2 ) {
                    var idx = $.trim( style_item.shift() ),
                        val = $.trim( style_item.join( ":" ) );

                    backupStyle[ idx ] = val; //背景图网址含有“:”
                }
            }
        }

        //backupStyle = htmlObj.find('.article135:first').get(0).style;
        /*var str = '',idxstr = '';
		for(var i in backupStyle) {
			str += i+':'+backupStyle[i]+';';
			idxstr += i+',';
		}
		alert(idxstr + "====\n" +str);
		alert(backupStyle['background-image']);*/
    }

    window.onload = function() {
        initTabs();
        initImagePanel();
        initColorSelector();
        editor.undoManger.save();

        $( document ).on( "click", ".deleteMsg", function( e ) {
            if (
                confirm(
                    "确认要删除吗？删除后已同步微信的内容不受影响。但135中使用过此图片的将无法显示。"
                )
            ) {
                var id = $( this ).data( "id" );
                top.ajaxAction( "/uploadfiles/delete/" + id, null, null, function() {
                    $( "#uploadfile-" + id ).remove();
                } );
            }
            e.stopPropagation();
        } );
        $( document ).on( "click", ".appmsg .icon", function() {
            var $parent = $( this ).parents( ".appmsg:first" );
            if ( $parent.hasClass( "selected" ) ) {
                $parent.removeClass( "selected" );
                updateFormState( "nocolor", null, "" );
            } else {
                $( "#mine" ).find( ".appmsg.selected" ).removeClass( "selected" );

                $parent.addClass( "selected" );
                var src = $parent.find( "img" ).attr( "src" );
                updateFormState( "colored", null, src, "left top", "repeat" );
            }
            updateBackground();
        } );
    };

    /* 初始化tab标签 */
    function initTabs() {
        var tabs = $G( "tabHeads" ).children;
        for ( var i = 0; i < tabs.length; i++ ) {
            domUtils.on( tabs[ i ], "click", function( e ) {
                var target = e.target || e.srcElement;
                for ( var j = 0; j < tabs.length; j++ ) {
                    if ( tabs[ j ] == target ) {
                        tabs[ j ].className = "focus";
                        var contentId = tabs[ j ].getAttribute( "data-content-id" );
                        $G( contentId ).style.display = "block";
                        if ( contentId == "imgManager" ) {
                            initImagePanel();
                        } else if ( contentId == "mine" ) {
                            if ( $( "#mine" ).html() == "" ) {
                                if ( !top.sso.check_userlogin() ) {
                                    var oldfunc = top.rs_callbacks.loginSuccess;
                                    top.rs_callbacks.loginSuccess = function( request ) {
                                        oldfunc( request );
                                        loadMineImg();
                                    };
                                    return false;
                                }
                                loadMineImg();
                            }
                        }
                    } else {
                        tabs[ j ].className = "";
                        $G( tabs[ j ].getAttribute( "data-content-id" ) ).style.display = "none";
                    }
                }
            } );
        }
    }

    function loadMineImg() {
        function mineImgLoaded() {
            $( "#mine .pagelink a" ).click( function() {
                $( "#mine" ).load( this.href, function( html ) {
                    mineImgLoaded();
                } );
                return false;
            } );
        }
        $( "#mine" ).load(
            "/uploadfiles/mine?modelclass=WxMsg",
            function( html ) {
                mineImgLoaded();
            }
        );
    }

    /* 初始化颜色设置 */
    function initColorSelector() {
        var obj = backupStyle; //editor.queryCommandValue('background');
        if ( obj ) {
            var color = obj[ "background-color" ],
                repeat = obj[ "background-repeat" ] || "repeat",
                image = obj[ "background-image" ] || "",
                size = obj[ "background-size" ] || "auto auto",
                position = obj[ "background-position" ] || "left top",
                pos = position.split( " " ),
                x = parseInt( pos[ 0 ] ) || 0,
                y = parseInt( pos[ 1 ] ) || 0;

            //if(repeat == 'no-repeat' && (x || y)) repeat = 'self';

            image = image.match( /url[\s]*\(([^\)]*)\)/ );
            image = image ? image[ 1 ].replace( /"|'/g, "" ) : "";

            // 默认统计图去掉
            if ( image == "http://stat.wx135.com/135editor/styles" ) {
                image = "";
            }

            updateFormState( "colored", color, image, position, repeat, size, x, y );
        } else {
            updateFormState();
        }

        var updateHandler = function() {
            updateFormState();
            updateBackground();
        };
        domUtils.on( $G( "nocolorRadio" ), "click", updateBackground );
        domUtils.on( $G( "coloredRadio" ), "click", updateHandler );
        domUtils.on( $G( "url" ), [ "keyup", "blur" ], function() {
            if ( $G( "url" ).value ) {
                utils.each( $G( "repeatBgType" ).children, function( item ) {
                    item.selected =
                        "repeat" == item.getAttribute( "value" ) ? "selected" : false;
                } );
            }
            updateHandler();
        } );
        domUtils.on( $G( "repeatBgType" ), "change", updateHandler );
        domUtils.on( $G( "alignType" ), "change", updateHandler );
        domUtils.on( $G( "sizeType" ), "change", updateHandler );
        domUtils.on( $G( "x" ), "keyup", updateBackground );
        domUtils.on( $G( "y" ), "keyup", updateBackground );

        initColorPicker();
    }

    /* 初始化颜色选择器 */
    function initColorPicker() {
        var me = editor,
            cp = $G( "colorPicker" );

        /* 生成颜色选择器ui对象 */
        var popup = new UE.ui.Popup( {
            content: new UE.ui.ColorPicker( {
                noColorText: me.getLang( "clearColor" ),
                editor: me,
                onpickcolor: function( t, color ) {
                    updateFormState( "colored", color );
                    updateBackground();
                    UE.ui.Popup.postHide();
                },
                onpicknocolor: function( t, color ) {
                    updateFormState( "colored", "transparent" );
                    updateBackground();
                    UE.ui.Popup.postHide();
                },
            } ),
            editor: me,
            onhide: function() {},
        } );

        /* 设置颜色选择器 */
        domUtils.on( cp, "click", function( e ) {
            popup.content.color = $( e.target ).css( "background-color" ) || "";
            popup.showAnchor( this );
        } );
        domUtils.on( document, "mousedown", function( evt ) {
            var el = evt.target || evt.srcElement;
            UE.ui.Popup.postHide( el );
        } );
        domUtils.on( window, "scroll", function() {
            UE.ui.Popup.postHide();
        } );
    }

    /* 初始化在线图片列表 */
    function initImagePanel() {
        onlineImage = onlineImage || new OnlineImage( "imageList" );
    }

    /* 更新背景色设置面板 */
    function updateFormState( radio, color, url, align, repeat, size, x, y ) {
        var nocolorRadio = $G( "nocolorRadio" ),
            coloredRadio = $G( "coloredRadio" );

        if ( radio ) {
            nocolorRadio.checked = radio == "colored" ? false : "checked";
            coloredRadio.checked = radio == "colored" ? "checked" : false;
        }
        if ( color ) {
            domUtils.setStyle( $G( "colorPicker" ), "background-color", color );
        }

        if ( url && /^\//.test( url ) ) {
            var a = document.createElement( "a" );
            a.href = url;
            browser.ie && ( a.href = a.href );
            url = browser.ie ?
                a.href :
                a.protocol + "//" + a.host + a.pathname + a.search + a.hash;
        }

        if ( url || url === "" ) {
            $G( "url" ).value = url;
        }
        if ( align ) {
            utils.each( $G( "alignType" ).children, function( item ) {
                item.selected =
                    align == item.getAttribute( "value" ) ? "selected" : false;
            } );
        }
        if ( repeat ) {
            utils.each( $G( "repeatBgType" ).children, function( item ) {
                item.selected =
                    repeat == item.getAttribute( "value" ) ? "selected" : false;
            } );
        }
        if ( size ) {
            utils.each( $G( "sizeType" ).children, function( item ) {
                item.selected = size == item.getAttribute( "value" ) ? "selected" : false;
            } );
        }
        if ( x || y ) {
            $G( "x" ).value = parseInt( x ) || 0;
            $G( "y" ).value = parseInt( y ) || 0;
        }

        //$G('alignment').style.display = coloredRadio.checked && $G('url').value ? '':'none';
        $G( "custom" ).style.display =
            coloredRadio.checked && $G( "url" ).value && $G( "alignType" ).value == "self" ?
            "" :
            "none";
    }

    /* 更新背景颜色 */
    function updateBackground() {
        if ( $G( "coloredRadio" ).checked ) {
            var color = domUtils.getStyle( $G( "colorPicker" ), "background-color" ),
                bgimg = $G( "url" ).value,
                size = $G( "sizeType" ).value,
                repeat = $G( "repeatBgType" ).value,
                align = $G( "alignType" ).value,
                backgroundObj = {
                    "background-repeat": "no-repeat",
                    "background-position": "center center",
                };

            backgroundObj[ "padding" ] =
                $G( "v-padding" ).value + " " + $G( "h-padding" ).value;
            /*
                  background-image: -webkit-linear-gradient(left, rgb(233, 139, 127), rgb(255, 255, 255), rgb(233, 139, 127));
                  */

            if ( color ) backgroundObj[ "background-color" ] = color;
            if ( size ) backgroundObj[ "background-size" ] = size;
            if ( repeat ) {
                backgroundObj[ "background-repeat" ] = repeat;
            }

            if ( bgimg ) {
                backgroundObj[ "background-image" ] = "url(" + bgimg + ")";
            } else if ( color ) {
                var gradient = "rgb(254, 254, 254)";
                if ( parent.getColor ) {
                    gradient = parent.getColor( color, "lighten", "5%" );
                    gradient = parent.getColor( gradient, "desaturate", "5%" );
                }
                if ( $( "#linearcolorCheckbox" ).prop( "checked" ) ) {
                    backgroundObj[ "background-image" ] =
                        "-webkit-linear-gradient(left, " +
                        color +
                        "," +
                        gradient +
                        " , " +
                        color +
                        ");";
                } else {
                    backgroundObj[ "background-image" ] = "none";
                }
            }

            if ( align == "self" ) {
                backgroundObj[ "background-position" ] =
                    $G( "x" ).value + "px " + $G( "y" ).value + "px";
            } else {
                backgroundObj[ "background-position" ] = align;
            }

            //editor.execCommand('background', backgroundObj);
            setArticleBackground( backgroundObj );
        } else {
            //editor.execCommand('background', null);
            setArticleBackground( null );
        }
    }

    function setArticleBackground( backgroundObj ) {
        if ( backgroundObj == null ) {
            var html = editor.getContent();
            var htmlObj = $( "<div>" + html + " </div>" );
            htmlObj.find( ".article135" ).removeAttr( "style" );

            //$(editor.selection.document).find('body').css('margin','15px');

            html = htmlObj.html();
            editor.setContent( html );
            return;
        } else {
            var bgStyle = "";
            for ( var i in backgroundObj ) {
                bgStyle += i + ":" + backgroundObj[ i ] + ";";
            }

            var html = editor.getContent();

            var htmlObj = $( "<div>" + html + " </div>" );
            if ( htmlObj.find( ".article135" ).length > 0 ) {
                var style = htmlObj.find( ".article135:first" ).eq( 0 ).style;
                var styleStr = "";
                for ( var i in style ) {
                    if ( !backgroundObj[ i ] ) {
                        bgStyle = i + ":" + backgroundObj[ i ] + ";" + bgStyle;
                    }
                }

                //htmlObj.find('.article135').removeClass('article135').removeAttr('style');
                htmlObj.find( ".article135" ).each( function() {
                    //$(this).removeClass('article135').removeAttr('style');
                    $( this ).replaceWith( $( this ).html() ); //文章中包含article135的样式通通去掉，只保留内部的内容。
                } );
            }
            var innerHtml = $.trim( htmlObj.html() );
            if ( innerHtml == "" ) {
                innerHtml = "<p><br/></p>";
            }

            html =
                '<section class="article135" style="' +
                bgStyle +
                '">' +
                innerHtml +
                "</section>";

            editor.setContent( html );

            //$(editor.selection.document).find('body').css('margin','0px');
        }
    }

    /* 在线图片 */
    function OnlineImage( target ) {
        this.container = utils.isString( target ) ?
            document.getElementById( target ) :
            target;

        this.init();
    }
    OnlineImage.prototype = {
        init: function() {
            var $this = this;
            $( "#remote-links a" ).click( function() {
                $( "#remote-links a" ).removeClass( "focus" );
                $( this ).addClass( "focus" );
                $( "#remote-links #search-txt" ).val( "" );
                $this.reset();
            } );
            $( "#remote-links :button" ).click( function() {
                $( "#remote-links a" ).removeClass( "focus" );
                $this.reset();
            } );
            this.reset();
            this.initEvents();
        },
        /* 初始化容器 */
        initContainer: function() {
            this.container.innerHTML = "";
            this.list = document.createElement( "ul" );
            this.clearFloat = document.createElement( "li" );

            domUtils.addClass( this.list, "list" );
            domUtils.addClass( this.clearFloat, "clearFloat" );

            this.list.id = "imageListUl";
            this.list.appendChild( this.clearFloat );
            this.container.appendChild( this.list );
        },
        /* 初始化滚动事件,滚动到地步自动拉取数据 */
        initEvents: function() {
            var _this = this;

            /* 滚动拉取图片 */
            domUtils.on( $G( "imageList" ), "scroll", function( e ) {
                var panel = this;
                if ( panel.scrollHeight - ( panel.offsetHeight + panel.scrollTop ) < 10 ) {
                    _this.getImageData();
                }
            } );
            /* 选中图片 */
            domUtils.on( this.container, "click", function( e ) {
                var target = e.target || e.srcElement,
                    li = target.parentNode,
                    nodes = $G( "imageListUl" ).childNodes;

                if ( li.tagName.toLowerCase() == "li" ) {
                    updateFormState( "nocolor", null, "" );
                    for ( var i = 0, node;
                        ( node = nodes[ i++ ] ); ) {
                        if ( node == li && !domUtils.hasClass( node, "selected" ) ) {
                            domUtils.addClass( node, "selected" );
                            var src = strip_imgthumb_opr( li.firstChild.getAttribute( "_src" ) );
                            updateFormState( "colored", null, src, "left top", "repeat" );
                        } else {
                            domUtils.removeClasses( node, "selected" );
                        }
                    }
                    updateBackground();
                }
            } );
        },
        /* 初始化第一次的数据 */
        initData: function() {
            /* 拉取数据需要使用的值 */
            this.state = 0;
            this.listSize = editor.getOpt( "imageManagerListSize" );
            this.listIndex = 0;
            this.listEnd = false;
            this.tagid = $( "#remote-links .focus" ).data( "tagid" );
            this.search = $( "#remote-links #search-txt" ).val();

            /* 第一次拉取数据 */
            this.getImageData();
        },
        /* 重置界面 */
        reset: function() {
            this.initContainer();
            this.initData();
        },
        /* 向后台拉取图片列表数据 */
        getImageData: function() {
            var _this = this;

            if ( !_this.listEnd && !this.isLoadingData ) {
                this.isLoadingData = true;
                var url =
                    "//" +
                    editor.getOpt( "plat_host" ) +
                    "/uploadfiles/ueditor?action=listimage", //editor.getActionUrl(editor.getOpt('imageManagerActionName')),
                    isJsonp = utils.isCrossDomainUrl( url );
                url += "&type=bg";

                ajax.request( url, {
                    timeout: 100000,
                    dataType: isJsonp ? "jsonp" : "",
                    data: utils.extend( {
                            tagid: this.tagid,
                            search: this.search,
                            start: this.listIndex,
                            size: this.listSize,
                        },
                        editor.queryCommandValue( "serverparam" )
                    ),
                    method: "get",
                    onsuccess: function( r ) {
                        try {
                            var json = isJsonp ? r : eval( "(" + r.responseText + ")" );
                            if ( json.state == "SUCCESS" ) {
                                _this.pushData( json.list );
                                _this.listIndex =
                                    parseInt( json.start ) + parseInt( json.list.length );
                                if ( _this.listIndex >= json.total ) {
                                    _this.listEnd = true;
                                }
                                _this.isLoadingData = false;
                            }
                        } catch ( e ) {
                            if ( r.responseText.indexOf( "ue_separate_ue" ) != -1 ) {
                                var list = r.responseText.split( r.responseText );
                                _this.pushData( list );
                                _this.listIndex = parseInt( list.length );
                                _this.listEnd = true;
                                _this.isLoadingData = false;
                            }
                        }
                    },
                    onerror: function() {
                        _this.isLoadingData = false;
                    },
                } );
            }
        },
        /* 添加图片到列表界面上 */
        pushData: function( list ) {
            var i,
                item,
                img,
                icon,
                _this = this,
                urlPrefix = editor.getOpt( "imageManagerUrlPrefix" );
            for ( i = 0; i < list.length; i++ ) {
                if ( list[ i ] && list[ i ].url ) {
                    item = document.createElement( "li" );
                    img = document.createElement( "img" );
                    icon = document.createElement( "span" );

                    domUtils.on(
                        img,
                        "load",
                        ( function( image ) {
                            return function() {
                                _this.scale(
                                    image,
                                    image.parentNode.offsetWidth,
                                    image.parentNode.offsetHeight
                                );
                            };
                        } )( img )
                    );
                    img.width = 113;
                    img.setAttribute( "src", urlPrefix + list[ i ].url );
                    img.setAttribute( "_src", urlPrefix + list[ i ].url );
                    domUtils.addClass( icon, "icon" );

                    item.appendChild( img );
                    item.appendChild( icon );
                    this.list.insertBefore( item, this.clearFloat );
                    item.style.backgroundImage = "url(" + urlPrefix + list[ i ].url + ")";
                    item.setAttribute( "title", "ID: " + list[ i ].id );
                }
            }
        },
        /* 改变图片大小 */
        scale: function( img, w, h, type ) {
            var ow = img.width,
                oh = img.height;

            if ( type == "justify" ) {
                if ( ow >= oh ) {
                    img.width = w;
                    img.height = ( h * oh ) / ow;
                    img.style.marginLeft = "-" + parseInt( ( img.width - w ) / 2 ) + "px";
                } else {
                    img.width = ( w * ow ) / oh;
                    img.height = h;
                    img.style.marginTop = "-" + parseInt( ( img.height - h ) / 2 ) + "px";
                }
            } else {
                if ( ow >= oh ) {
                    img.width = ( w * ow ) / oh;
                    img.height = h;
                    img.style.marginLeft = "-" + parseInt( ( img.width - w ) / 2 ) + "px";
                } else {
                    img.width = w;
                    img.height = ( h * oh ) / ow;
                    img.style.marginTop = "-" + parseInt( ( img.height - h ) / 2 ) + "px";
                }
            }
        },
        getInsertList: function() {
            var i,
                lis = this.list.children,
                list = [],
                align = getAlign();
            for ( i = 0; i < lis.length; i++ ) {
                if ( domUtils.hasClass( lis[ i ], "selected" ) ) {
                    var img = lis[ i ].firstChild,
                        src = img.getAttribute( "_src" );
                    list.push( {
                        src: src,
                        _src: src,
                        floatStyle: align,
                    } );
                }
            }
            return list;
        },
    };

    dialog.onok = function() {
        updateBackground();
        editor.undoManger.save();
        editor.fireEvent( "saveScene" );
        editor.fireEvent( "catchRemoteImage" );
    };
    dialog.oncancel = function() {
        //editor.execCommand('background', backupStyle);
        setArticleBackground( backupStyle );
    };
} )();